<template>
  <div>
    <el-table
      :header-cell-style="{ color: 'black', 'background-color': '#f6f8fd' }"
      :cell-style="{ color: 'black' }"
      ref="multipleTable"
      :data="data.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
      tooltip-effect="dark"
      style="width: 100%"
      size="medium"
    >
      <el-table-column :label="$t('IP')" prop="ip" />
       <el-table-column :label="$t('system.operating_system')" prop="operating_system" />
    </el-table>
    <el-pagination
      :current-page="currentPage"
      :page-sizes="[20, 25, 50, 75, 100]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="data.length"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  props: {
    data: {
      type: Array,
      default: function () {
        return [];
      },
    },
  },
  data() {
    return {
      currentPage: 1,
      pageSize: 20,
    };
  },
};
</script>

<style rel="stylesheet/scss" lang="scss">
.el-table {
  border: 1px solid #ebeef5;
  .line-color {
    background-color: #f2f7ff;
  }
}
.el-pagination {
    text-align: right;
    /* border: 1px solid #ccc; */
    border-top: 0px;
    padding-top: 5px;
    padding-bottom: 5px;
    border-top: 0px;
    .el-pagination__sizes,
    .el-pagination__total {
      float: left;
    }
  }
</style>